<template>
  <div class="wrap">
    <div id="echartContainer" style="height: 350px;">
    </div>
    <div id="echartContainer3" style="height: 350px;">
    </div>
    <div id="echartContainer2" style="height: 350px;">
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      return {

      }
    },
    methods:{
      loadingSuccuss(){
        this.$emit('getLoadingFinished',false)
      },
      getCategoryStackBar(){
        let xData = [],sData = [];
        this.axios.get(this.api.findOrderCount)
        .then((res) => {
          this.loadingSuccuss();
          let _data = res.data.details;
          if(res.data.status === 1){
            xData = _data[0];
            sData[0] = _data[1];
            sData[1] = _data[2];
          }
          this.drawCategoryStackBar(xData, sData);
          this.drawLineStack2(xData, sData);
          this.loadingSuccuss();
        })
        .catch(err => {
          this.drawCategoryStackBar(xData, sData);
          this.drawLineStack2(xData, sData);
          this.loadingSuccuss();
        })
      },
      getLowAndNormalOrderCount() {
        let xData = [],sData = [];
        this.axios.get(this.api.findLowAndNormalOrderCount)
        .then((res) => {
          this.loadingSuccuss();
          let _data = res.data.details;
          if(res.data.status === 1){
            xData = _data[0];
            sData[0] = _data[1];
            sData[1] = _data[2];
          }
          this.drawLineStack(xData, sData);
          this.loadingSuccuss();
        })
        .catch(err => {
          this.drawLineStack(xData, sData);
          this.loadingSuccuss();
        })
      },
      drawCategoryStackBar(_xData,_sData){
        document.getElementById('echartContainer').style.width = window.innerWidth + 'px';
        var myChart = this.$echarts.init(document.getElementById('echartContainer'));
        let option = {
          title: {
            text:'最近30天订单走势'
          },
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ['付款订单', '取消订单'],
            top: '6%'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis:  {
            type: 'category',
            data: _xData
          },
          yAxis: {
            type: 'value'

          },
          series: [
            {
              name: '付款订单',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'inside'
                }
              },
              data: _sData[0]
            },
            {
              name: '取消订单',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'inside'
                }
              },
              data: _sData[1]
            }
          ]
        };
        this.loadingSuccuss();
        myChart.setOption(option)
      },
      drawLineStack(_xData,_sData) {
        document.getElementById('echartContainer2').style.width = window.innerWidth + 'px';
        var myChart = this.$echarts.init(document.getElementById('echartContainer2'));
        let option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data:['低温','常温']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: _xData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name:'低温',
              type:'line',
              label:{
                normal:
                  {
                    show:true
                  }
              },
              stack: '总量',
              data:_sData[0]
            },
            {
              name:'常温',
              type:'line',
              label:{
                normal:
                  {
                    show:true
                  }
              },
              stack: '总量',
              data:_sData[1]
            }
          ]
        };
        myChart.setOption(option);
      },
      drawLineStack2(_xData,_sData) {
        document.getElementById('echartContainer3').style.width = window.innerWidth + 'px';
        var myChart = this.$echarts.init(document.getElementById('echartContainer3'));
        let option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data:['付款订单','取消订单']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: _xData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name:'付款订单',
              type:'line',
              label:{
                normal:
                  {
                    show:true,
                    position: 'top'
                  }
              },
              stack: '总量',
              data:_sData[0]
            },
            {
              name:'取消订单',
              type:'line',
              label:{
                normal:
                  {
                    show:true,
                    position: 'top'
                  }
              },
              stack: '总量',
              data:_sData[1]
            }
          ]
        };
        myChart.setOption(option);
      }
    },
    mounted(){
      this.getCategoryStackBar();
      this.getLowAndNormalOrderCount();
    }
  }
</script>
<style>

</style>
